<!-- 热门板块 -->
<template>
    <div class="echarts-header">
        <span>排名</span>
        <span>景区</span>
        <span>预约数量</span>
    </div>
    <div class="echarts" id="hotPlateChart"></div>
</template>

<script setup lang="ts" name="hotPlateChart">
import { ECharts, EChartsOption, init } from "echarts";
import { ranking1, ranking2, ranking3, ranking4 } from "../assets/ranking-icon";

interface ChartProp {
    name: string;
    value: number;
    percentage: string;
    maxValue: number;
}

let chart: ECharts | null = null;
const initChart = (data: any = {}): ECharts => {
    const charEle = document.getElementById("hotPlateChart") as HTMLElement;
    chart = init(charEle) as unknown as ECharts;
    const option = buildOption(data);
    chart?.setOption(option);
    return chart;
};

function updateChart(params: any) {
    const option = buildOption(params);
    chart?.setOption(option);
}

function buildOption(params: any) {
    const option: EChartsOption = {
        grid: {
            top: "5%",
            left: "7%",
            right: "4%",
            bottom: "1%",
            containLabel: true,
        },
        xAxis: {
            type: "value",
            axisLine: {
                show: false,
                lineStyle: {
                    color: "white",
                },
            },
            nameGap: 1,
            splitLine: {
                show: false,
            },
            axisTick: {
                show: false,
            },
            axisLabel: {
                show: false,
                fontSize: 16,
            },
            triggerEvent: false,
        },
        yAxis: [
            {
                show: true,
                data: params.data.map((val: ChartProp) => val.name),
                inverse: true,
                axisLine: {
                    show: false,
                },
                splitLine: {
                    show: false,
                },
                axisTick: {
                    show: false,
                },
                axisLabel: {
                    color: "#fff",
                    formatter: function (value: any) {
                        let str = value.length > 6 ? value.slice(0, 6) + "..." : value;
                        let index = params.data.map((item: ChartProp) => item.name).indexOf(value) + 1;
                        return ["{" + (index > 3 ? "lg" : "lg" + index) + "|NO." + index + "}", "{title|" + str + "}"].join(" ");
                    },
                    rich: {
                        lg1: {
                            width: 60,
                            backgroundColor: {
                                image: ranking1,
                            },
                            color: "#fff",
                            align: "center",
                            height: 20,
                            fontSize: 13,
                        },
                        lg2: {
                            width: 60,
                            backgroundColor: {
                                image: ranking2,
                            },
                            color: "#fff",
                            align: "center",

                            height: 20,
                            fontSize: 13,
                        },
                        lg3: {
                            width: 60,
                            backgroundColor: {
                                image: ranking3,
                            },
                            color: "#fff",
                            align: "center",
                            height: 20,
                            fontSize: 13,
                        },
                        lg: {
                            width: 60,
                            backgroundColor: {
                                image: ranking4,
                            },
                            color: "#fff",
                            align: "center",

                            height: 20,
                            fontSize: 13,
                        },
                        title: {
                            width: 60,
                            fontSize: 13,
                            align: "center",
                            padding: [0, 10, 0, 15],
                        },
                    },
                },
                triggerEvent: false,
            },
            {
                show: true,
                inverse: true,
                data: params.data,
                axisLabel: {
                    fontSize: 14,
                    color: "#fff",
                    // align: "right",
                    margin: 20,
                    formatter: (value: any) => {
                        return value >= 10000 ? (value / 10000).toFixed(2) + "w" : value;
                    },
                },
                axisLine: {
                    show: false,
                },
                splitLine: {
                    show: false,
                },
                axisTick: {
                    show: false,
                },
                triggerEvent: false,
            },
        ],
        series: [
            {
                name: "条",
                type: "bar",
                yAxisIndex: 0,
                data: params.data,
                barWidth: 12,
                itemStyle: {
                    borderRadius: 30,
                    color: function (callbackDataParams) {
                        let num = params.colors.length;
                        return params.colors[callbackDataParams.dataIndex % num];
                    },
                },
                label: {
                    show: true,
                    position: [12, 0],
                    lineHeight: 14,
                    color: "#fff",
                    formatter: (cbparams: any) => {
                        return cbparams.data.percentage;
                    },
                },
            },
            {
                name: "框",
                type: "bar",
                yAxisIndex: 1,
                data: params.data.map((val: ChartProp) => {
                    if (!val.maxValue) {
                        return 5;
                    }
                    return val.maxValue;
                }),
                barWidth: 18,
                itemStyle: {
                    color: "none",
                    borderColor: "#00c1de",
                    borderWidth: 1,
                    borderRadius: 15,
                },
                silent: true,
            },
        ],
    };
    return option;
}

defineExpose({
    initChart,
    updateChart,
});
</script>

<style scoped lang="less">
.echarts {
    width: 100%;
    height: calc(100% - 56px);
}

.echarts-header {
    box-sizing: border-box;
    display: flex;
    height: 36px;
    margin: 10px 10px 0;
    line-height: 36px;
    background: url("../images/rankingChart-bg.png") no-repeat;
    background-size: 100% 100%;

    span {
        width: 18%;
        margin-left: 4px;
        font-size: 14px;
        font-weight: bold;
        color: #fdbc52;
        text-align: center;

        &:nth-child(2) {
            margin-left: 4px;
        }

        &:last-child {
            width: 20%;
            margin-left: 60px;
        }
    }
}
</style>
